<template>
  <div class="Set">
    <el-row :gutter="0">
      <el-col :span="6">
        <div class="Setleft">
          <div class="imag_box">
            <el-avatar :size="size" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              class="imag"></el-avatar>
          </div>
          <div class="text">
            <p>
              <span class="title">姓名:</span>
              <span>派大星</span>
            </p>
            <p>
              <span class="title">部门:</span>
              <span>教学部</span>
            </p>
            <p>
              <span class="title">职务:</span>
              <span>经理</span>
            </p>
            <p>
              <span class="title">工号:</span>
              <span>zl112233</span>
            </p>
          </div>
          <div class="timer_shaft ">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color">
                <span class="date">{{activity.timestamp}}&nbsp;&nbsp;</span>
                (<span class="state">{{activity.content}}</span>)
              </el-timeline-item>
            </el-timeline>
          </div>

        </div>
      </el-col>
      <el-col :span="18">
        <div class="Setrigth">
          <el-row :gutter="0" class='pass'>
            <el-col :span="7" class="persondata">
              <div>
                <h3>个人资料</h3>
                <el-progress type="circle" :percentage="25"></el-progress>
                <p @click="Popup()">点击完善个人资料</p>
              </div>
            </el-col>
            <el-col :span="7" class="persondata">
              <div>
                <h3>账号密码</h3>
                <el-progress type="circle" :percentage="70" status="warning"></el-progress>
                <p @click="centerDialogVisible = true">点击更改账号密码</p>
              </div>
            </el-col>
            <el-col :span="7" class="persondata">
              <div>
                <h3>账号绑定</h3>
                <el-progress type="circle" :percentage="100" status="success"></el-progress>
                <p>点击绑定手机或邮箱</p>
              </div>
            </el-col>
            <el-col :span="7" class="persondata">
              <div>
                <h3>账号注销</h3>
                <el-progress type="circle" :percentage="100" status="exception"></el-progress>
                <p @click="dialogVisible = true">点击注销账号</p>
              </div>
            </el-col>
          </el-row>
          <el-button type="primary" class='btn'>切换账号</el-button>
          <el-button type="info" plain class='btn'>退出登录</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 更改账号密码弹窗部分 -->
    <el-dialog title="请更改" :visible.sync="centerDialogVisible" width="35%" center>
      <!-- <div> -->
      <p>
        <span>新&nbsp;&nbsp;账&nbsp;&nbsp;号:&nbsp;&nbsp;</span>
        <el-input v-model="userName" placeholder="请输入您要更改的账号" class="iptsize"></el-input>
      </p>
      <p>
        <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码:&nbsp;&nbsp;</span>
        <el-input placeholder="请输入您要更改的密码" v-model="password" show-password></el-input>
      </p>
      <!-- </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upDates()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 注销账号提示弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
      <span style="color: #ff4100; font-size: 20px;">确认注销账号</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deluser()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userName: '',
        password: '',
        idS: '',
        //头像大小数据
        size: 120,
       //账号密码更改弹窗条件
        centerDialogVisible: false,
        //注销账号弹窗条件
        dialogVisible : false,
         //时间轴数据
        activities: [{
            content: '晋升',
            timestamp: '2018-04-15'
          },
          {
            content: '调动',
            timestamp: '2018-04-13',
            color: '#0bbd87'
          },
          {
            content: '转正',
            timestamp: '2018-04-11',
          },
          {
            content: '实习',
            timestamp: '2018-04-10'
          },
          {
            content: '入职',
            timestamp: '2018-04-19'
          }
        ]
      }
    },
    methods: {
      //修改账号密码
      upDates() {
        this.centerDialogVisible = false;
        this.idS = localStorage.getItem('id');
        console.log(this.idS);
        this.mysqlser.post('/update', {
          accounts: this.userName,
          password: this.password,
          id: this.idS
        }).then(res => {
          console.log(res);
        })
      },
      //注销账号
      deluser(){
        this.dialogVisible = false;
        this.idS = localStorage.getItem('id');
        this.mysqlser.get(`/del?id=${this.idS}`)
        .then(res => {
          console.log(res)
        })
      }
    },
  }
</script>

<style scoped="scoped">
  .Setleft {
    box-sizing: border-box;
    border: 3px solid #F1F3F5;
    background-color: #fff;
  }

  .imag_box {
    width: 100%;
    height: 200px;
    border-bottom: 2px solid #F1F3F5;
    position: relative;
  }

  .imag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .text {
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid #F1F3F5;
  }

  .text span {
    margin-right: 10px;
    letter-spacing: 3px;
  }

  .title {
    font-weight: 600;
  }

  .timer_shaft {
    padding: 20px;
  }

  .el-timeline {
    padding: 0;
  }

  .el-timeline-item {
    text-align: left;
  }

  .date {
    color: red;
  }

  .state {
    font-size: 12px;
    color: #333;
  }

  .Setrigth {
    border: 3px solid #F1F3F5;
    overflow: hidden;
  }

  .pass {
    height: 100%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .persondata {
    box-shadow: 3px 0px 5px #D3DCE6, -3px 0px 5px #D3DCE6;
    margin-left: 33px;
    margin-top: 20px;
  }

  .btn {
    width: 150px;
    height: 50px;
    margin-top: 25px;
    float: left;
    margin-left: 20px;
  }
</style>
